import React from 'react';
import style from './style.objective-create';
import { Button, List, IconButton, Select, Input, LabelInput, InlineButtonInput } from 'sq-ui';
import { success, info, Modal, DateSelect, Checkbox, MulSelect, SelectList } from '../../ui-components';
import util from '../../util';
import cx from 'classnames';
import { checkCurrentAmount } from './Objective';
import { GuideInfo, NextGuide,GuideBox } from '../guide/Guide';

export default
class ObjectiveTest extends React.Component {
  constructor(props) {
    super(props);
    this.selectedPeriod = props.params.periodId;
    const {
      objectiveId,
    } = props;

    this.init = {
      content: "",
    };

    // 创建目标
    let selectPreObjective1 = null;
    let selectPreObjective2 = null;
    selectPreObjective1 = { preKeyword1: "" };
    selectPreObjective2 = { preKeyword2: "" };
    this.objectiveInit = {
      objectivePeriodId: props.params.periodId,
      isRenderPreObjective1: false, // 是否渲染上一周期目标列表数据
      isRenderPreObjective2: false, // 是否渲染上一周期目标列表数据
      ...this.init,
      directorList: props.location.query.type == 3 ? [
        {
          coreUserProfileVO: this.props.app.profile,
        }
      ] : [],
    };

    this.state = {
      // 搜索
      keyword: '',
      isRenderObjective1: true,
      isRenderObjective2: true,
      ...selectPreObjective1,
      ...selectPreObjective2,
      field: this.objectiveInit,
      dialogH: "auto",
      selectedItem1: "",
      selectedItem2: "",
      preKeyword1: "",
      preKeyword2: "",
    };
  }

  componentWillUnmount() {
    this.unmount = true;
  }
  // 选择并设置周期，
  handlePeriodChange(value) {
    this.selectedPeriod = value;
  }
  
  // 查询上一周期的目标
  searchPreObjective1(e){
    let { value } = e.target;
    value = value.trim();
    this.setState({
      isRenderPreObjective1: true,
      isRenderPreObjective2: false,
    });
    this.props.actions.fetchPreObjective({periodId: this.selectedPeriod});
  }
  resetSearch1 = () => {
    this.setState({ selectPreObjective1: null, });
  }
  clearSearch1 = () => {
    setTimeout(() => {
      this.props.actions["resetPreObjective"]();
    }, 150);
  }
  // 点击选择上一周期目标
  handleSelectPreSearchObjective1(objective) {
    let result = {};
    let arr = ['comment', 'createdTime', 'createdUserId', 'editable', 'hasParent', 'hasSubordinate',
      'keyResultList', 'lastModifiedTime', 'lastModifiedUserId', 'lastModifiedUserProfile',
      'objectiveId', 'objectivePeriodId', 'objectivePeriodName', 'objectivePeriodOwnerJobTitleName',
      'objectivePeriodOwnerName', 'orderIndex', 'orgId', 'ownerId', 'parentObjectiveId',
      'parentObjectiveName', 'progress', 'progressMetricType', 'startingAmount', 'type', 
      "directorList"];
    for(let key in objective){
      if(arr.indexOf(key) === -1){
        result[key] = objective[key];
      }
    }
    this.setState({
      selectPreObjective1: objective,
      preKeyword1: '',
      field: {
        ...this.state.field,
        ...result
      }
    });
  }
  // 上周期目标列表
  renderSearchPreObjective1() {
    const { okr } = this.props;
    const { objectiveVOList } = okr;
    if (objectiveVOList.length === 0) return null;
    let result = [];
    objectiveVOList.forEach(item => { // 筛选未完成的
      if((+item.progress * 100) < 100) result.push(item);
    });
    for(var i = 0; i < 15; i++){
      result.push({content: objectiveVOList[0].content + " -" + i});
    }
    return <List close={this.clearSearch1} data={result}
      onClick={v => this.handleSelectPreSearchObjective1(v)}
      item={v => (
        <div style={{ display: 'block' }}>
          <p style={{ fontSize: '13px' }}>{v.content}</p>
        </div>
      )}
    />
  }
  
  // 22222
  searchPreObjective2(e){
    let { value } = e.target;
    value = value.trim();
    this.setState({
      isRenderPreObjective1: false,
      isRenderPreObjective2: true,
    });
    this.props.actions.fetchPreObjective({periodId: this.selectedPeriod});
  }
  resetSearch2 = () => { // 重置选择
    this.setState({ selectPreObjective2: null, });
  }
  clearSearch2 = () => { // 关闭下拉选择
    setTimeout(() => {
      this.props.actions["resetPreObjectiveTest"]();
    }, 150);
  }
  // 点击选择上一周期目标
  handleSelectPreSearchObjective2(objective) {
    let result = {};
    let arr = ['comment', 'createdTime', 'createdUserId', 'editable', 'hasParent', 'hasSubordinate',
      'keyResultList', 'lastModifiedTime', 'lastModifiedUserId', 'lastModifiedUserProfile',
      'objectiveId', 'objectivePeriodId', 'objectivePeriodName', 'objectivePeriodOwnerJobTitleName',
      'objectivePeriodOwnerName', 'orderIndex', 'orgId', 'ownerId', 'parentObjectiveId',
      'parentObjectiveName', 'progress', 'progressMetricType', 'startingAmount', 'type', 
      "directorList"];
    for(let key in objective){
      if(arr.indexOf(key) === -1){
        result[key] = objective[key];
      }
    }
    this.setState({
      selectPreObjective2: objective,
      preKeyword2: '',
      field: {
        ...this.state.field,
        ...result
      }
    });
  }
  // 上周期目标列表
  renderSearchPreObjective2() {
    const { okr } = this.props;
    const { objectiveVOList } = okr;
    if (objectiveVOList.length === 0) return null;
    let result = [];
    for(let i = 0; i < 10; i++){
      result.push({ content: "测试数据 - "+i });
    }
    return <List close={this.clearSearch2} data={result}
      onClick={v => this.handleSelectPreSearchObjective2(v)}
      item={v => (
        <div style={{ display: 'block' }}>
          <p style={{ fontSize: '13px' }}>{v.content}</p>
        </div>
      )}
    />
  }

  componentDidMount(){
    let h = document.body.clientHeight;
    this.setState({
      dialogH: (h - 46 - 60 - 30) + "px"
    })
  }

  render() {
    const { period } = this.props.okr;
    const { objectivePeriods } = period;
    return (
      <div className={style.root} style={{height: this.state.dialogH, overflowY: "auto", overflowX: "hidden"}}>
          <div className={style['input-two']} style={{ position: 'relative' }} >
            <label style={{minWidth: "128px"}}>是否延续上周期目标</label>
            <div style={{ width: '450px', position: 'relative' }}>
              <Select id="objectivePeriodId" 
                className={style['priority-select']} 
                style={{ width: '185px' }}
                value={this.props.params.periodId} 
                onChange={::this.handlePeriodChange} 
                list={objectivePeriods}
                item={item => <li key={item.objectivePeriodId} data-value={item.objectivePeriodId}>{item.name}</li>}
              />
            </div>
          </div>
          <div className={style['input-two']} style={{ position: 'relative' }}>
            <label style={{minWidth: "128px"}}>有bug的下拉</label>
            <div style={{ width: '100%', position: 'relative' }}>
              {
                this.state.selectPreObjective1 ? 
                  <div className={style['selected-objective']}>
                    <span>{ this.state.selectPreObjective1.content }</span>
                    <IconButton icon="close" onClick={this.resetSearch1}/>
                  </div> : 
                  <Input value={this.state.preKeyword1} onChange={::this.searchPreObjective1}
                    onBlur={this.clearSearch1} onFocus={::this.searchPreObjective1}/>
              }
              { this.state.isRenderPreObjective1 ? this.renderSearchPreObjective1() : null }
            </div>
          </div>
          <div className={style['input-two']} style={{ position: 'relative' }}>
            <label style={{minWidth: "128px"}}>测试数据的下拉</label>
            <div style={{ width: '100%', position: 'relative' }}>
              {
                this.state.selectPreObjective2 ? 
                  <div className={style['selected-objective']}>
                    <span>{ this.state.selectPreObjective2.content }</span>
                    <IconButton icon="close" onClick={this.resetSearch2}/>
                  </div> : 
                  <Input value={this.state.preKeyword2} onChange={::this.searchPreObjective2}
                    onBlur={this.clearSearch2} onFocus={::this.searchPreObjective2}/>
              }
              { this.state.isRenderPreObjective2 ? this.renderSearchPreObjective2() : null }
            </div>
          </div>
      </div>
    );
  }
}